<template>
	<view class="contianer">
		<view class="bottom-btn">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="tckj-tab"
				:class="activetIndex==tab.id?'activetab':''" @click="ontabtap(tab)">
				<text class="uni-tab-item-title">{{tab.name}}</text>
			</view>
		</view>
		<view class="project-info">

			<view class="search">
				<uni-search-bar class="search-bar" radius="100" placeholder="请输入监测站点代码" v-model="squarename"
					clearButton="none" cancelButton="none" @confirm="search" />
			</view>
		</view>
		<view class="project-list">
			<uni-collapse ref="collapse" accordion @change="change">
				<uni-collapse-item titleBorder="none" v-for="(item,index) in squarelist">
					<template v-slot:title>
						<uni-list>
							<uni-list-item>
								<template v-slot:body>
									<view class="yf-item">
										<view class="slot-box solt-title cap">
											<uni-tag :circle="true" :text="item.surveyType" type="success"
												v-if="item.surveyType=='返青期'" />
											<uni-tag :circle="true" :text="item.surveyType" type="primary"
												v-if="item.surveyType=='盛期'" />
											<uni-tag :circle="true" :text="item.surveyType" type="warning"
												v-if="item.surveyType=='枯黄期'" />

										</view>
										<view class="slot-box solt-conetent cap">
											<text class="slot-text">{{item.yfNumber}}</text>
										</view>
										<view class="status leftcap" style="color:green;float:right"
											@click="gotoDetials(item)">
											详情
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-list>
					</template>
					<view class="content">
						<view class="squarelist" v-for="(square,key) in item.items" @click="gotoSquire(item,square)">
							<!-- <view class="square-icon"></view>
							<view class="square">{{square.text}}</view> -->
							<uni-list-item class="square" :title="square.text"
								:showArrow="'草地类型,地上生物量,地下生物量,灌丛调查'.includes(square.text)" />
						</view>

					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import {
		getInfo,
		setInfo
	} from '@/core/unicommon/storyageInfo.js'
	export default {

		data() {
			return {
				activetIndex: "返青期",
				squarename: "",
				tabBars: [{
					id: "返青期",
					name: "返青"

				}, {
					id: "盛期",
					name: "盛期"
				}, {
					id: "枯黄期",
					name: "枯黄"
				}],
				yflist: [],
				squarelist: [],
				current: '1-0',
				classDataTree: [{
					text: '全部',
					value: '1-0'

				}, {
					text: '项目一',
					value: '1-0',
					children: []
				}, {
					text: '项目二',
					value: '1-0',
					children: []
				}, {
					text: '项目三',
					value: '1-0',
					children: []
				}],
				poltTypeNature: true,
				userdata: null,
				yd: null

			}
		},
		onLoad(e) {
			if (e && e.data) {
				this.yd = JSON.parse(decodeURIComponent(e.data))
				this.poltTypeNature = this.yd.grasslandType == '人工草地' ? false : true
				this.getyflist(this.yd.ydNumber)
			}
		},
		onShow(){
				this.getyflist(this.yd.ydNumber)
		},
		mounted() {

		},
		methods: {
			getyflist(ydNumber) {
				getInfo("userdata").then(res => {
					let userdata = res.data
					this.yflist = userdata.yf.filter(t => t.ydNumber == ydNumber && t.action != 'delete')
					console.log("111",this.yflist)

					this.getsquareList()
				})
			},
			change(e) {

			},

			getsquareList(type) {
				if (!type) {
					this.squarelist = JSON.parse(JSON.stringify(this.yflist))
					

					this.activetIndex = ''
				} else {
					let squares = this.yflist.filter(t => t.surveyType == type)
					this.squarelist = JSON.parse(JSON.stringify(squares))
				}
				if (this.squarename) {
					this.squarelist = this.squarelist.filter(t => t.yfNumber.includes(this.squarename))
				}
				this.squarelist = this.squarelist.map(d => {
					if (d.surveyType == '盛期') {
						if (this.poltTypeNature) {
							d.items = [{
									"text": "草地类型",
									"value": "grassLandType"
								},
								{
									"text": "地上生物量",
									"value": "biomass"
								},
								{
									"text": "土壤温湿度",
									"value": "temperatureAndhumidity"
								},
								{
									"text": "地下生物量",
									"value": "underBiomass"
								},
								{
									"text": "灌丛调查",
									"value": "shrublist"
								}
							]
						} else {
							d.items = [{
									"text": "草地类型",
									"value": "grassLandType"
								},
								{
									"text": "地上生物量",
									"value": "biomass"
								},
								{
									"text": "土壤温湿度",
									"value": "temperatureAndhumidity"
								}
							]
						}
					} else if (d.surveyType == '返青期') {
						d.items = [{
							"text": "返青率",
							"value": "overwintering"
						}]

					} else {
						d.items = []
					}
					return d
				})


			},
			ontabtap(item) {
				this.activetIndex = item.id
				this.getsquareList(this.activetIndex)

			},
			gotoDetials(item) {
				console.log(item)
				let data = {

					ydNumber: item.ydNumber,
					yfNumber: item.yfNumber

				}
				let url = ""
				if (item.surveyType == "盛期") {
					url = "/pages/sampleplot/samplesquare/peakPeriodSquare"
				} else if (item.surveyType == "返青期") {
					url = "/pages/sampleplot/samplesquare/greenSquare"
				} else {
					url = "/pages/sampleplot/samplesquare/yellowSquare"
				}
				uni.navigateTo({
					url: url + "?data=" + encodeURIComponent(JSON.stringify(data))
				});
			},
			gotoSquire(yf, square) {
				let url = "/pages/sampleplot/samplesquare/"
				if (yf.surveyType == "盛期") {
					yf.grasstype = this.poltTypeNature
				}
				uni.navigateTo({
					url: url + square.value + "?data=" + encodeURIComponent(JSON.stringify(yf))
				});
				console.log("点击", square)
			},
			search(val) {

				this.getsquareList()
			},
			onchange(project) {
				console.log(project)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contianer {
		height: 100%;
		background-color: #fff;

		.bottom-btn {
			width: 100%;
			height: 40px;
			background-color: #fff;
			z-index: 3;
			margin: 0 auto;

			.tckj-tab {
				width: 30%;
				float: left;
				height: 38px;
				line-height: 38px;
				text-align: center;

			}

			.activetab {
				border-bottom: 2px solid #00aaff;
				color: #00aaff;
			}

		}

		.project-info {
			width: 100%;
			height: 40px;
			border-bottom: 1px solid #ccc;
			box-shadow: 2px 2px 10px #ccc;
			background-color: #fff;

			.search {
				width: 100%;
				padding: 0 30rpx;
				height: 40px;

				.search-bar {
					height: 30px;
					margin-left: 10rpx;
					padding: 0 !important;

				}
			}
		}

		.project-list {
			width: 100%;
			height: calc(100vh - 125px);
			overflow-y: auto;
		}


	}

	.cap {
		margin-right: 25rpx;
	}


	.squarelist {
		width: 100%;
		height: 100rpx;
		padding-left: 60rpx;



		.square {
			width: 80%;

			margin-left: 15px;
			height: 100rpx;
			line-height: 80rpx;
			font-size: 35rpx;
			color: #1890ff;
		}
	}

	.yf-item {
		display: flex;
		width: 100%;

		.solt-title {
			width: 150rpx;

		}

		.solt-conetent {
			width: calc(100% - 150rpx);
		}

		.status {
			width: 100rpx;
			float: right;
		}
	}






	.btns {
		width: 100%;
		height: 80rpx;

		.plotBtn {
			width: 25%;
			height: 60rpx;
			float: left;
			margin-left: 10rpx;
			background-color: #00aaff;
			line-height: 60rpx;
			border-radius: 30rpx;
			color: #fff;
			text-align: center;
			margin-top: 10rpx;
		}
	}
</style>